<template>
	<div class="indexnav">
		
		<div class="eveyday">
			<div @click="getmusic">
				<i class="iconfont icon-yinle"></i>
				
			</div>
			<p>每日推荐</p>
		</div>
		
		<div class="eveyday">
			<div @click="getmusicplaylist">
				<i class="iconfont icon-yinle1"></i>
			</div>
			<p>歌单</p>
		</div>
		
		<div class="eveyday">
			<div @click="getmusiclist">
				<i class="iconfont icon-liebiao"></i>
				
			</div>
			<p>排行榜</p>
		</div>
		
		<div class="eveyday">
			<div @click="getradiodetail">
				<i class="iconfont icon-ttpodicon"></i>
				
			</div>
			<p>电台</p>
		</div>
		
		
		
	</div>
</template>

<script>
	export default{
		methods:{
			getmusic(){
				this.$router.push('/find/recommendmusic')
			},
			getmusicplaylist(){
				this.$router.push('/find/musicplaylist')
			},
			getmusiclist(){
				this.$router.push('/musiclist')
			},
			getradiodetail(){
				this.$router.push('/radiolist')
			}
		}
	}
</script>

<style lang="scss" scoped>

	@import "~@/assets/css/common.scss";
	.indexnav{
		display: flex;
		justify-content: space-around;
		padding:vw(10) vw(10);
		align-items: center;
		background:#fff;
		.eveyday{
			text-align:center;
			div{
				width: vw(40);
				height: vw(40);
				border-radius: 50%;
				background: linear-gradient(#ee0979,#ff6a00);
				margin: 0 auto;
				i{
					font-size:vw(24);
					line-height: vw(40);
					color: #fff;
				}
			}
			p{
				padding: vw(6) 0;
				font-size: vw(12);
				color: #666;
			}
		}
	}
</style>